| JQuery | 您所在的位置：网站首页 › jq eq选择器 › JQuery |
|
JQuery
是一款JS的函数库，对于原生JS进行了封装。
Write less ,Do more
JQuery重点封装了对于JS中元素查找相关的API。同时还对其他操作进行封装。主要使用了面向对象的思想进行了封装。
编写流程
导入jquery的js文件
通过$函数查找页面元素
拿到jquery对象后进行实际业务操作。
JQuery方式获取出来的对象和原生的JS的dom对象并不是同一类型，使用方式也不一样。 复制代码 JQ对象和JS对象的区别、联系及互转区别：JQ对象和JS对象不通用，JQ对象不能使用JS的属性和函数，同时JS对象也不能使用JQ对象的属性和函数。JQ对象在使用时，更贴近面向对象的使用方式，JQ对象一般通过调用函数的方式实现功能。而JS对象一般直接使用 对象.属性 方式进行操作。 互相转换： JQ对象--->JS对象 此时把JQ对象看成一个JS对象的数组或者集合使用。 JQ对象[索引] 或者 JQ对象.get(索引) 复制代码 JS对象--->JQ对象 通过$()函数，把JS对象传入即可。 let jq对象 = $(js对象); 复制代码 JQ中的事件 load：某个页面或图像被完成加载 submit：当表单提交时触发该事件 click：鼠标单击事件 dblclick：鼠标双击事件 blur：元素失去焦点 focus：元素获得焦点 Change：用户改变域的内容把js中事件属性的名称中的on去掉，作为函数名使用。通过传参指定要执行的逻辑。 通用的解绑操作jq对象.off(事件名称)。可以解绑掉指定对象上已经绑定的事件。 off中不传参就会把指定对象上的所有已绑定事件都去掉。 hover()函数：模拟了一个鼠标悬停的事件。需要传入两个函数，第一个函数代表鼠标进入及悬停在组件上的时候执行的函数。第二个函数代表鼠标移出执行的函数。 $("#div").hover(function (){ $(this).css("background","red"); },function(){ $(this).css("background","blue"); }); 复制代码 事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系。 方式一：单独定义 (元素).事件方法名1(要执行的功能);(元素).事件方法名1(要执行的功能); (元素).事件方法名1(要执行的功能);(元素).事件方法名2(要执行的功能); //方式一 单独定义 $("#div").mouseover(function(){ //背景色：红色 //$("#div").css("background","red"); $(this).css("background","red"); }); $("#div").mouseout(function(){ //背景色：蓝色 //$("#div").css("background","blue"); $(this).css("background","blue"); }); this还是js的，底层还是去用js的底层方法。 所以需要转换一下 复制代码 方式二：链式定义 $(元素).事件方法名1(要执行的功能) .事件方法名2(要执行的功能); //方式二 链式定义 $("#div").mouseover(function(){ $(this).css("background","red"); }).mouseout(function(){ $(this).css("background","blue"); }); 复制代码 遍历在jq对象上调用任何函数，都相当于在jq对象对应的所有元素上都调用了这个函数。也就是说，jq对象自带遍历效果。 这种遍历效果只能用于“设置类”的方法，但是“获取类”方法不能使用这种方式。 JQ对象.each(function(index,element){})each方法可以遍历jq对象，通过指定回调函数获取每一个值。 函数的参数： index：遍历时的索引值，从0开始。 element：每次遍历出的元素对象是一个js对象 复制代码在函数中，也可以使用this关键字获取遍历出的元素。this也是每次遍历出的js元素对象。 $.each(被遍历的容器,function(index,element){})用法基本和上面的方式相同，只不过被遍历的容器可以是jq对象也可以是普通的js数组。 jq独有的each方式遍历，并不是for循环，是函数的回调的过程。函数中是没有break和continue关键字的。 所以，如果在each中需要break或者continue，需要通过函数的返回值控制。如果返回是true，代表continue；如果返回是false，代表break 方式一：传统方式 for(let i = 0; i < 容器对象长度; i++){ 执行功能; } //方式一：传统方式 $("#btn").click(function(){ let lis = $("li"); for(let i = 0 ; i < lis.length; i++) { alert(i + ":" + lis[i].innerHTML); } }); 复制代码 方式二：对象.each()方法 容器对象.each(function(index,ele){ 执行功能; }); //方式二：对象.each()方法 $("#btn").click(function(){ let lis = $("li"); lis.each(function(index,ele){ alert(index + ":" + ele.innerHTML); }); }); 复制代码 方式三：$.each()方法 $.each(容器对象,function(index,ele){ 执行功能; }); //方式三：$.each()方法 $("#btn").click(function(){ let lis = $("li"); $.each(lis,function(index,ele){ alert(index + ":" + ele.innerHTML); }); }); 复制代码 方式四：for of语句 for(ele of 容器对象){ 执行功能; } //方式四：for of 语句遍历 $("#btn").click(function(){ let lis = $("li"); for(ele of lis){ alert(ele.innerHTML); } }); 复制代码 选择器jquery使用css中选择器的思想，在页面中查找元素。 id选择器：$("#id的属性值") let div1 = $("#div1"); 复制代码 类选择器：$(".class的属性值") let cls = $(".cls"); 复制代码 元素选择器：$("元素的名称") let divs = $("div"); 复制代码 并集选择器 多个选择器用逗号隔开，相当于把这些选择器选中的元素合并到一起选中。 复制代码 后代选择器：$（“A B”）； 查找指定选择器下所有的后代元素，后代元素无论层级关系。 复制代码 子元素选择器：$（“A>B”）； 查找指定选择器下的直接子元素，只有直接子元素才能被选择，比后代选择器的范围小。 复制代码 属性选择器 $("元素[属性名]") [属性名]：包含指定属性的元素，属性的值不限定 $("元素[属性名=属性值]") [属性名=属性值]：包含指定属性的元素，属性的值必须等于指定值 复制代码 过滤选择器：$("A: ");针对结果中索引值进一步进行限定的过滤器 :first :last :even偶数 :odd奇数，从0开始 :eq(索引值) 指定索引的元素 :lt(索引值) less than 小于指定索引 :gt(索引值) greater than 大于指定索引 复制代码表单属性选择器 $("A:disabled"); $("A:checked"); $("A:selected"); :not(选择器) 对选择器进行取反 表单状态相关选择器 :enabled 获得可用元素 :disabled 获得不可用元素 :checked 单、复选框被勾选中的状态 :selected 下拉列表被选中状态 表单项类型相关选择器（input标签的type属性的取值） :input 匹配所有表单项，包括 input, textarea, select 和 button 元素 :text :password :radio :checkbox :submit :image :reset :button :file :hidden 复制代码 dom操作在jquery中，页面加载完成的函数，称为入口函数。使用如下形式指定： $(function(){ //此处可以编写页面加载完成后执行的逻辑 }) 复制代码 增删改操作 append(element) 往元素中添加一个子元素，放到所有元素的最后 append的参数，可以直接编写html标签，作为元素使用 例如：$("#div").append("test"); remove() 移除自己，无需父元素就可以删除 empty() 清空所有子元素，调用者不会被删除 复制代码 操作文本 html：获取标签的文本 html(value)：设置标签的文本内容，解析标签 代码实现 操作文本 我是div //1. html() 获取标签的文本内容 $("#btn1").click(function(){ //获取div标签的文本内容 let value = $("#div").html(); alert(value); }); //2. html(value) 设置标签的文本内容，解析标签 $("#btn2").click(function(){ //设置div标签的文本内容 //$("#div").html("我真的是div"); $("#div").html("我真的是div"); }); 复制代码 操作对象 $("元素")：创建指定元素 append(element)：添加成最后一个子元素，由添加者对象调用 appendTo(element)：添加成最后一个子元素，由被添加者对象调用 perpend(element)：添加成第一个子元素，由添加者对象调用 perpendTo(element)：添加成第一个子元素，由被添加者对象调用 berfore(element)：添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 after(element)：添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 remove( )：删除指定元素（自己移除自己） empty( )：清空指定元素的所有子元素 代码实现 操作对象 ;;; ;;; ;;; ;;; 北京 上海 广州 深圳 加油 雄起 ;;; ;;; /* 1. $("元素") 创建指定元素 2. append(element) 添加成最后一个子元素，由添加者对象调用 3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用 4. prepend(element) 添加成第一个子元素，由添加者对象调用 5. prependTo(element) 添加成第一个子元素，由被添加者对象调用 6. before(element) 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 7. after(element) 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 8. remove() 删除指定元素(自己移除自己) 9. empty() 清空指定元素的所有子元素 */ // 按钮一：添加一个span到div $("#btn1").click(function(){ let span = $("span"); $("#div").append(span); }); //按钮二：将加油添加到城市列表最下方 $("#btn2").click(function(){ //$("#city").append($("#jy")); $("#jy").appendTo($("#city")); }); //按钮三：将加油添加到城市列表最上方 $("#btn3").click(function(){ //$("#city").prepend($("#jy")); $("#jy").prependTo($("#city")); }); //按钮四：将雄起添加到上海下方 $("#btn4").click(function(){ $("#sh").after($("#xq")); }); //按钮五：将雄起添加到上海上方 $("#btn5").click(function(){ $("#sh").before($("#xq")); }); //按钮六：将雄起删除 $("#btn6").click(function(){ $("#xq").remove(); }); //按钮七：将描述列表全部删除 $("#btn7").click(function(){ $("#desc").empty(); }); 复制代码 操作样式 css(name)：根据样式名称获取css样式 css(name,value)：设置css样式 addClass(value)：给指定的对象添加样式类名 removeClass(value)：给指定的对象删除样式类名 toggleClass(value)：如果没有样式类名，则添加。如果有，则删除。 代码实现 操作样式 .cls1{ background: pink; height: 30px; } 我是div ;; ;; ;; ;; ;; // 1.css(name) 获取css样式 $("#btn1").click(function(){ alert($("#div").css("border")); }); // 2.css(name,value) 设置CSS样式 $("#btn2").click(function(){ $("#div").css("background","blue"); }); // 3.addClass(value) 给指定的对象添加样式类名 $("#btn3").click(function(){ $("#div").addClass("cls1"); }); // 4.removeClass(value) 给指定的对象删除样式类名 $("#btn4").click(function(){ $("#div").removeClass("cls1"); }); // 5.toggleClass(value) 如果没有样式类名，则添加。如果有，则删除 $("#btn5").click(function(){ $("#div").toggleClass("cls1"); }); 复制代码 操作属性 prop(name，[value])：获得/设置属性的值（checked，selected） attr(name，[value])：获得/设置属性的值 removeProp() removeAttr()prop()：该方法用于获取一些状态相关的属性，能够把默认的false、true设置上。隐含的属性也能获取。 一般用于设置一些固有属性，非固有属性推荐使用attr。 固有属性：在html规范中，已经约定好了此元素具有的属性。通过查看html文档能够在属性列表中看到的属性才是固有属性。 复制代码 代码实现 操作属性 ;; 男 女 ---请选择--- 本科 专科 // 1.attr(name,[value]) 获得/设置属性的值 //按钮一：获取输入框的id属性 $("#btn1").click(function(){ alert($("#username").attr("id")); }); //按钮二：给输入框设置value属性 $("#btn2").click(function(){ $("#username").attr("value","hello..."); }); // 2.prop(name,[value]) 获得/设置属性的值(checked，selected) //按钮三：选中女 $("#btn3").click(function(){ $("#gender2").prop("checked",true); }); //按钮四：选中本科 $("#btn4").click(function(){ $("#bk").prop("selected",true); }); 复制代码 JQ对象函数JS对象的属性html()innerHTMLXXX(function(){})事件相关属性：onXXX = function(){}text()innerTextval()valuecss()styleaddClass()及removeClass()class 案例一：额外补充功能 // 隔行换色 $("tr:gt(0):even").addClass("even"); $("tr:gt(0):odd").addClass("odd"); // 鼠标悬停后的高亮显示 $("tr:gt(0)").hover(function (){ // 鼠标悬停 $(this).addClass("highlight"); },function (){ // 鼠标移出 $(this).removeClass("highlight"); }) 复制代码 案例二：功能优化 //1.准备一个数组 let imgs = [ "img/01.jpg", "img/02.jpg", "img/03.jpg", "img/04.jpg", "img/05.jpg", "img/06.jpg", "img/07.jpg", "img/08.jpg", "img/09.jpg", "img/10.jpg"]; // 定时器id存储 let id; // 随机获取的图片索引 let index; // 开始按钮 $("#startBtn").click(function (){ // 把开始和结束按钮的禁用状态进行切换 $("#startBtn").prop("disabled",true); $("#stopBtn").prop("disabled",false); // 开启循环定时器，随机获取图片在小图滚动 id = setInterval(function(){ index = Math.floor(Math.random() * imgs.length); $("#small").attr("src",imgs[index]); },200); }); $("#stopBtn").click(function (){ // 把开始和结束按钮的禁用状态进行切换 $("#startBtn").prop("disabled",false); $("#stopBtn").prop("disabled",true); // 结束循环定时器，产生最终结果 clearInterval(id); // 在大图区域显示结果 $("#big").attr("src",imgs[index]); // 动画效果 $("#big").hide().fadeIn(2000); }); 复制代码 图片的切换频率不宜过高，设置为100左右即可。 随机算法需要修改。我们尽量不要使用遍历的方式循环展示图片。如果要随机挑选，推荐使用Math.random(). let index = Math.floor(imgs.length * Math.random()); // [0,1) [0,length)是浮点数 ---> 向下取整[0,length-1]是整数 复制代码 显示和隐藏操作，可以使用jquery的动画api实现。 使用show()和hide()方法可以使元素显示或隐藏。这两个方法可以传入播放时长携带动画效果。 show() 只有元素处于隐藏状态才能调用show显示它 hide() 只有元素处于显示状态才能调用hide隐藏它 复制代码 |
| CopyRight 2018-2019 实验室设备网 版权所有 |